<template>
  <div>
    <el-row>
      <el-button @click="addfloors">添加模块</el-button>
    </el-row>

    <div v-for="item in floorArray">
        <div class="left-box">
          <div class="demo-input-suffix">
            模块名 <el-input :value="item.title" style="width: 200px" readonly></el-input>
          </div>
          <div class="demo-input-suffix">
            主图片
            <img :src="item.mainIcon" alt="" style="width: 40px;height:40px">
          </div>
          <div class="demo-input-suffix">
            次图片
            <img :src="item.secondIcons" alt="" style="width: 40px;height:40px">
          </div>

          <el-button @click="eidtfloors(item._id)"  >编辑</el-button>
          <el-button  type="warning" @click="freezeFloor(item._id,item.freeze)">{{item.freeze ? "冻结" :"解冻"}}</el-button>
          <el-button  type="danger" @click="delFloor(item._id)">删除模块</el-button>
        </div>
        <div class="right-box" >
          <div v-for="m in item.relationGoods" class="mlists" @click="editmodulars(item._id,m._id)">
            <img :src="m.url" alt="" style="width: 150px;height:150px">
            <div>
              <img :src="item.secondIcons" alt="" style="width: 40px;height:40px">
              <span>{{m.price}}</span>
            </div>
          </div>
          <el-button @click="addmodulars(item._id)">添加商品关联</el-button>
        </div>
    </div>

    <el-dialog  :visible.sync="addfloordialog" >
      <el-form ref="floorfrom" :model="floorfrom" label-width="80px">
        <el-form-item label="模块名">
          <el-input v-model="floorfrom.title" style="width: 70%;"></el-input>
        </el-form-item>
        <el-form-item label="主图片">
          <el-upload class="upload-demo" action="" list-type = "picture-card" :on-change = "addmainIcon" :file-list="mainIconfile" :limit=1 :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="次图片">
          <el-upload class="upload-demo" action="" list-type = "picture-card" :on-change = "addsecondIcons"  :file-list="secondIconsfile" :limit=1 :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button @click="addfloordialog = false">取 消</el-button>
        <el-button type="primary" @click="addfloor">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog  :visible.sync="editfloordialog" >
        <el-form ref="editfloorfrom" :model="editfloorfrom" label-width="80px">

            <el-form-item label="模块名">
                <el-input v-model="editfloorfrom.title" style="width: 70%;"></el-input>
            </el-form-item>

            <el-form-item label="主图片">

                <img :src="editfloorfrom.mainIcon" v-if="typeof(editfloorfrom.mainIcon) == 'string'" alt="" style="margin-right:10px; float:left; width: 148px;height:148px">
              <el-col :span="16"  style="display: inline-block; float:left;">
                <el-upload class="upload-demo" action="" list-type = "picture-card" :on-change = "eidtmainIcon"  :file-list="mainIconfile" :limit=1 :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                </el-upload>
              </el-col>
            </el-form-item>

            <el-form-item label="次图片">
                <img :src="editfloorfrom.secondIcons"  v-if="typeof(editfloorfrom.secondIcons) == 'string'" alt="" style="margin-right:10px; float:left; width: 148px;height:148px">
              <el-col :span="16"  style="display: inline-block; float:left;">
                <el-upload class="upload-demo" action="" list-type = "picture-card" :on-change = "eidtsecondIcons"  :file-list="secondIconsfile" :limit=1 :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                </el-upload>
              </el-col>
            </el-form-item>

        </el-form>

        <div class="footer">
            <el-button @click="editfloordialog = false">取 消</el-button>
            <el-button type="primary" @click="etidfloor">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog  :visible.sync="addmodulardialog" width="80%">
      <el-row>
        <el-col :span="8">
          <el-form ref="addmodularform" :model="addmodularform" label-width="80px">
            <el-form-item label="图片"  >
              <el-upload class="upload-demo" action="" list-type = "picture-card" :on-change = "addmodularfiles" :file-list="addmodularfile" :limit=1 :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="标题">
              <el-input v-model="addmodularform.title" style="width: 70%;"></el-input>
            </el-form-item>
            <el-form-item label="价格"  >
              <el-input type="salePrice" v-model.number="addmodularform.price" auto-complete="off" style="width: 70%;">元</el-input>
            </el-form-item>
          </el-form>
          <div class="footer">
            <el-button @click="addmodulardialog = false">取 消</el-button>
            <el-button type="primary" @click="addmodular">确 定</el-button>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="nav-letf">
            <span><el-button type="primary" @click="all" plain>全部</el-button></span>
            <span  v-for="item in typeArray"><el-button type="primary" @click="choosetype(item.type)" plain>{{item.type}}</el-button></span>
          </div>
          <div class="nav-right">
            <el-row>
              <el-col :span="6"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
              <el-button icon="el-icon-search" @click="search" circle></el-button>
            </el-row>
            <el-table :data="goodsData" style="width: 100%" v-loading="loading" highlight-current-row  @current-change="getCurrentRow">
              <!--<el-table-column label="" width="50">-->
                <!--<template scope="scope">-->
                  <!--<el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.$index ,scope.row)">&nbsp;</el-radio>-->
                <!--</template>-->
              <!--</el-table-column>-->
              <el-table-column type="index"  width="50" label="序号"></el-table-column>
              <el-table-column prop="goodName" label="产品" ></el-table-column>
              <el-table-column prop="goodsfile" label="图片" width="100">
                <template slot-scope="scope">
                  <img  :src="scope.row.goodsfiles[0]" alt="" style="width: 50px;height: 40px">
                </template>
              </el-table-column>
              <el-table-column prop="costPrice" label="价钱" ></el-table-column>
            </el-table>
          </div>
          <div class="block">
            <el-pagination background @current-change="handleCurrentChange"  layout="total, prev, pager, next" :total="count"> </el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-dialog>

    <el-dialog  :visible.sync="editmodulardialog" width="80%">
      <el-row>
        <el-col :span="8">
          <el-form ref="editmodularfrom" :model="editmodularfrom" label-width="80px">
            <el-form-item label="图片"  >
              <img :src="editmodularfrom.url" alt="" style="width: 148px;height:148px">
              <el-upload class="upload-demo" action="" list-type = "picture-card" :on-change = "editmodularfiles" :file-list="addmodularfile" :limit=1 :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="标题">
              <el-input v-model="editmodularfrom.title" style="width: 70%;"></el-input>
            </el-form-item>
            <el-form-item label="价格"  >
              <el-input type="salePrice" v-model.number="editmodularfrom.price" auto-complete="off" style="width: 70%;">元</el-input>
            </el-form-item>
          </el-form>
          <div class="footer">
            <el-button @click="editmodulardialog = false">取 消</el-button>
            <el-button type="primary" @click="editmodular">确 定</el-button>
            <el-button type="danger" @click="delmodular">删 除</el-button>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="nav-letf">
            <span><el-button type="primary" @click="all" plain>全部</el-button></span>
            <span  v-for="item in typeArray"><el-button type="primary" @click="choosetype(item.type)" plain>{{item.type}}</el-button></span>
          </div>
          <div class="nav-right">
            <el-row>
              <el-col :span="6"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
              <el-button icon="el-icon-search" @click="search" circle></el-button>
            </el-row>
            <el-table :data="goodsData" style="width: 100%" v-loading="loading" highlight-current-row  @current-change="getCurrentRow">
              <!--<el-table-column label="" width="50">-->
                <!--<template scope="scope">-->
                  <!--<el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.$index ,scope.row)">&nbsp;</el-radio>-->
                <!--</template>-->
              <!--</el-table-column>-->
              <el-table-column type="index"  width="50" label="序号"></el-table-column>
              <el-table-column prop="goodName" label="产品" ></el-table-column>
              <el-table-column prop="goodsfile" label="图片" width="100">
                <template slot-scope="scope">
                  <img  :src="scope.row.goodsfiles[0]" alt="" style="width: 50px;height: 40px">
                </template>
              </el-table-column>
              <el-table-column prop="costPrice" label="价钱" ></el-table-column>
            </el-table>
          </div>
          <div class="block">
            <el-pagination background @current-change="handleCurrentChange"  layout="total, prev, pager, next" :total="count"> </el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios"

  export default {
    data() {
      return {
        typeArray: [],
        goodsData: [],
        input: "",
        loading: true,
        type: "",
        page: 1,
        count: 0,
        radio: "",
        chooseGoods: {},
        mainIconfile:[],
        secondIconsfile:[],
        addmodularfile:[],

        addfloordialog:false,
        floorArray:[],
        floorfrom:{
          title:"",
          mainIcon:"",
          secondIcons:""
        },

        editfloordialog:false,
        editfloorid:"",
        editfloorindex:"",
        editfloorfrom:{
          title: '',
          mainIcon:"",
          secondIcons:""
        },

        addmodulardialog:false,
        addmodularid:"",
        addmodularform:{
          url:"",
          title:"",
          price:"",
        },

        editmodulardialog:false,
        editmodularfloorid:"",
        editmodularid:"",
        editmodularfrom:{
          url:"",
          title:"",
          mainIcon:"",
          secondIcons:""
        },
        message:"",
      }
    },
    mounted() {
      this.getfloor()
    },
    methods: {
      open() {
        this.$message(this.message);
      },
      getfloor(){
        axios.get("/floor/getFloor").then((response)=>{
          let res = response.data;
          this.floorArray = res.result.list;
          this.mainIconfile = [];
          this.secondIconsfile = [];
        })
      },
      addfloors(){
        this.addfloordialog = true;
      },

      addmainIcon(file){ this.floorfrom.mainIcon = file;},

      addsecondIcons(file){ this.floorfrom.secondIcons = file;},

      addfloor(){
        var from = new FormData();
        from.append('title', this.floorfrom.title);
        from.append('mainIcon', this.floorfrom.mainIcon.raw);
        from.append('secondIcons', this.floorfrom.secondIcons.raw);
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        axios.post("/floor/addFloor",from ,config).then((ress)=>{
          let res = ress.data;
          if(res.status == "0"){
            this.addfloordialog = false;
            this.floorfrom.title = '';
            this.floorfrom.mainIcon="";
            this.floorfrom.secondIcons="";

            this.getfloor();
          }else{
            console.log(res)
            this.message = res.msg
            this.open();
          }
        })
      },

      eidtmainIcon(file){ this.editfloorfrom.mainIcon = file;},
      eidtsecondIcons(file){ this.editfloorfrom.secondIcons = file;},

      eidtfloors(id){
          this.editfloorid = id;
          this.editfloordialog = true;

          this.mainIconfile = [];
          this.secondIconsfile = [];
          let  param ={
            id:id,
          };
          axios.get("/floor/findFloor",{
            params:param
          }).then((response)=>{
            let res = response.data;
            if (res.status == "0"){
              this.editfloorfrom = {
                title:res.result.list.title,
                mainIcon:res.result.list.mainIcon,
                secondIcons:res.result.list.secondIcons,
              }
            }
          })
      },
      etidfloor(){
          var from = new FormData();
          from.append('id', this.editfloorid);
          from.append('title', this.editfloorfrom.title);
          from.append('mainIcon', this.editfloorfrom.mainIcon.raw);
          from.append('secondIcons', this.editfloorfrom.secondIcons.raw);

          let config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
          axios.post("/floor/editFloor",from ,config).then((ress)=>{
            let res = ress.data;
            if(res.status == "0"){
              this.editfloordialog = false;
              this.editfloorfrom.title="";
              this.editfloorfrom.mainIcon="";
              this.editfloorfrom.secondIcons = "";
              this.getfloor();
            }else{
              this.message = res.msg
              this.open();
            }
          })
      },

      delFloor(_id){
        axios.post("/floor/delFloor", {
          id:_id,
        }).then((response) => {
          let res = response.data;
          if (res.status == "0") {
            this.getfloor();
          }
        })
      },

      freezeFloor(id,freeze){
        axios.post("/floor/freezeFloor", {
          id:id,
          freeze:!freeze
        }).then((response) => {
          let res = response.data;
          if (res.status == "0") {
            this.getfloor();
          }
        })
      },

///////////////////////////////////////////////////////modular

      addmodulars(id){
        this.addmodularid = id;
        this.addmodulardialog=true;
        this.getGoods();
        this.gettype();
        this.chooseGoods = {};
        this.addmodularform.url= "";
        this.addmodularform.title= "";
        this.addmodularform.price= "";
        this.addmodularfile = []
      },
      addmodularfiles(file){
        this.addmodularform.url = file;
      },
      addmodular(){
        if(JSON.stringify(this.chooseGoods) == "{}") {
          this.open2();
        }else{
          var from = new FormData();
          from.append('id', this.addmodularid);
          from.append('url', this.addmodularform.url.raw);
          from.append('title', this.addmodularform.title);
          from.append('price', this.addmodularform.price);
          from.append('goodsId', this.chooseGoods._id);
          from.append('salse', this.chooseGoods.salse);

          let config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          };
          axios.post("/floor/addModular", from, config).then((ress) => {
            let res = ress.data;
            if (res.status == "0") {
              this.addmodulardialog = false;
              this.getfloor();
            } else {
              this.message = res.msg;
              this.open();
            }
          })
        }
      },

      editmodularfiles(file){
        this.editmodularfrom.url = file;
      },

      editmodulars(floorid,modularid){
        this.editmodularfloorid = floorid;
        this.editmodularid = modularid;
        this.editmodulardialog = true;
        this.chooseGoods = {};
        this.editmodularfrom.url= "";
        this.editmodularfrom.title= "";
        this.editmodularfrom.price= "";
        this.addmodularfile = [];
        this.getGoods();
        this.gettype();
        let  param ={
          id:floorid,
          index:modularid
        }
        axios.get("/floor/findModular",{
          params:param
        }).then((response)=>{
          let res = response.data;
          if (res.status == "0"){
            this.editmodularfrom = {
              url:res.result.list.url,
              title:res.result.list.title,
              price:res.result.list.price,
              goodsId:res.result.list.goodsId,
            }
          }
        })
      },
      editmodular(){
        var from = new FormData();

        from.append('id', this.editmodularfloorid);
        from.append('ind', this.editmodularid);
        from.append('url', this.editmodularfrom.url.raw);
        from.append('title', this.editmodularfrom.title);
        from.append('price', this.editmodularfrom.price);
        from.append('goodsId', this.chooseGoods._id);

        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }

        axios.post("/floor/editModular",from ,config).then((ress)=>{
          let res = ress.data;
          if(res.status == "0"){
            this.editmodulardialog = false;
            this.chooseGoods = {};
            this.getfloor();
          }else{
            this.message = res.msg;
            this.open();
          }
        })
      },

      delmodular(){
        axios.post("/floor/delModular", {
          id:this.editmodularfloorid,
          index:this.editmodularid
        }).then((response) => {
          let res = response.data;
          if (res.status == "0") {
            this.editmodulardialog = false;
            this.getfloor();
          }
        })
      },
      open2() {
        this.$confirm('请选择关联的商品，然后提交', '提示', {
          showCancelButton:false,
          type: 'warning'
        })
      },
///////////////////////////////////////////////////////

      getGoods() {
        let param = {
          page: this.page,
          pageSize: 10,
          type: this.type,
          shelves: true
        }
        axios.get("/goodslist/getShelvesGoods", {
          params: param
        }).then((response) => {
          let res = response.data;
          if (res.status == "0") {
            this.goodsData = res.result.list;
            this.count = res.result.count;
            this.loading = false;
          }
        })
      },
      gettype() {
        axios.get("/typelist/getType").then((response) => {
          let res = response.data;
          this.typeArray = res.result.list;
        })
      },
      choosetype(type) {
        this.type = type;
        this.getGoods();
      },
      all() {
        this.type = "";
        this.getGoods();
      },
      search() {
        axios.post("/goodslist/getOneShelvesGoods", {
          goodName: this.input
        }).then((response) => {
          let res = response.data;
          this.goodsData = res.result.list;
        })
      },
      getCurrentRow(row) {
         //console.log(row);
        if(row == null){
          this.chooseGoods = {};
        }else{
          this.chooseGoods = row;
        }
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getGoods()
      }
    }
  }
</script>


<style  lang="scss" scoped>
  .el-tabs{
    margin-top: 20px;
  }
  .nav-letf{
    width: 100px;
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
  }
  .nav-right{
    width: calc(100% - 120px);
    display: inline-block;
    vertical-align: top;
  }
  .footer{
    margin-top: 100px;
  }
  .nav-letf .el-button{
    width: 100% ;
    padding: 0;
    height: 40px;
    margin-bottom: 10px;
  }
  .demo-input-suffix{
    margin-bottom: 20px;
  }
  .left-box{
    display: inline-block;
    margin-top: 20px;
  }
  .right-box{
    display: inline-block;
    vertical-align: top;
    margin-top: 20px;
    margin-left: 50px;
  }
  .mlists{
    display: inline-block;
    margin-right: 20px;
  }

</style>
